<template>
  <el-card>
    <div class="header">
      <span>销售额类别占比</span>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="全部渠道" name="all">
          <PieCharts :activeName="activeName"></PieCharts>
        </el-tab-pane>
        <el-tab-pane label="线上" name="online">
          <PieCharts :activeName="activeName"></PieCharts>
        </el-tab-pane>
        <el-tab-pane label="门店" name="store">
          <PieCharts :activeName="activeName"></PieCharts>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
// 引入饼图组件
import PieCharts from "./PieCharts";
export default {
  name: "Category",
  data() {
    return {
      activeName: "all",
      allData: [
        { value: 1048, name: "手机" },
        { value: 735, name: "家电" },
        { value: 580, name: "衣物" },
        { value: 484, name: "数码" },
        { value: 300, name: "护肤" },
      ],
      onlineData: [
        { value: 670, name: "手机" },
        { value: 735, name: "家电" },
        { value: 700, name: "衣物" },
        { value: 889, name: "数码" },
        { value: 300, name: "护肤" },
      ],
      storeData: [
        { value: 300, name: "手机" },
        { value: 560, name: "家电" },
        { value: 960, name: "衣物" },
        { value: 200, name: "数码" },
        { value: 450, name: "护肤" },
      ],
    };
  },
  // 注册组件
  components: {
    PieCharts,
  },
};
</script>

<style scoped>
.header {
  color: #666;
  display: block;
}
.header span {
  float: left;
  margin-top: 10px;
}
>>> .el-tabs__nav-wrap {
  margin-left: 302px;
}
>>> .is-active {
  background-color: #409eff;
  color: #fff;
}
</style>